<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<canvas class="f__canvas" canvas-id="qrcode" id="qrcode" width="300" height="300" style="margin: auto;width: 300px;height: 300px;"></canvas>
		<view class="inivt">
			<view class="inbox">
				<view style="padding: 30px;">
					<image mode="widthFix" :src="qrcodeImg.replace(/[\r\n]/g,'')" style="margin: auto;">
				</view>
			</view>
			<view class="u-padding-20">
			<u-row gutter="16" justify="space-between">
				<u-col span="6">
					邀请码:{{userInfo.salt}}
				</u-col>
				<u-col span="6" text-align="right">
					<span v-if="userInfo.nickname==''">邀请用户:请设置昵称</span><span v-else>邀请用户:{{userInfo.nickname}}</span>
				</u-col>
			</u-row>
			</view>
		</view>
			<view style="padding:20rpx 40rpx 0rpx 40rpx;">
				<view style="font-size: 50rpx; color: red; text-align: center;padding-bottom: 10px;">{{userInfo.salt}}</view>
				<view style="font-size: 40rpx; color: royalblue; text-align: center;">
					{{share.title}}
				</view>
				<view style="font-size: 30rpx; color: #666; text-align: center;">{{share.desc}}</view>
			</view>
			
			<view class="onCopy" @click="clipboardcopy">
				<view class="copy">
				<text>复制链接</text>
				</view>
			</view>
		
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import base from "@/config/baseUrl";
	import _canvas from '@/uni_modules/fan-canvas/canvasUtils';// 加载万能绘制方法
	import { saveTempFilePathImg } from '@/uni_modules/fan-canvas/plugins/utils';// 需要保存图片可以引用此文件
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/u-qrcode';
export default {

	data() {
		return {
			qrcodeImg:'',
			share:[]
		};
	},
	computed:{
	    ...mapState(['PrimaryColor','userInfo']),
	},
	onLoad() {
		this.createQrcode()
		this.share=base.share
	},
	methods: {
    clipboardcopy() {
	  if (this.userInfo.is_sunline!=1)that.$u.toast("请先加入团队");
      let that = this;
      uni.setClipboardData({
        data: base.share.link+"/c/?s=" + that.userInfo.salt,
        success: function (data) {
          that.$u.toast("邀请链接复制成功");
        },
        fail: function (err) {},
        complete: function (res) {},
      });
    },
		// 创建二维码
		async createQrcode(){
			console.log('创建二维码')
		    var that = this
			const ctx = uni.createCanvasContext('qrcode',this);
			const uqrcode = new uQRCode(
			  {
				text: base.share.link+"/c/?s=" + that.userInfo.salt,//二维码参数
				size: 300
			  },
			  ctx
			);
			uqrcode.make();
			uqrcode.draw().then(()=>{
				uni.canvasToTempFilePath({
				    width: 600,
				    height: 600,
				    canvasId: 'qrcode',
				    success(res) {
				        // 二维码本地图
				         that.qrcodeImg = res.tempFilePath
				        //console.log(res.tempFilePath,'createQrcode')
				    }
				},that)
			})
		},
	
	
	},
};
</script>

<style lang="scss" scoped>
.inivt {
  width: 96%;
  border-radius: 30rpx;
  background: #fe5c47;
  margin: 20px auto 20rpx auto;
  color: #ffffff;
  .inbox{
	  background: #FFFFFF;border-radius: 30rpx;  text-align: center; 
  }
}

.onCopy {
  text-align: center;
  position: fixed;
  bottom: 120rpx;
  width: 50%;
  margin: auto 25%;
  .copy {
    width: 180rpx;
    margin: auto;
    background: #fe5c47;
    border: solid 1px #ffffff;
    padding: 10rpx;
	color: #ffffff;
    border-radius: 20rpx;
  }
}
.f__canvas {
	width: 300rpx;
	height: 300rpx;
	position: fixed;
	top: -10000rpx;
	left: 0rpx;
}
</style>
